
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>本月流量使用信息</title>
	<script type="text/javascript" src="/resource/js/jquery.min.js"></script>
	<script type="text/javascript" src="/resource/js/highcharts.js"></script>
	<script type="text/javascript" src="/resource/js/jquery.cookie.js"></script>
	<script type="text/javascript" src="/resource/js/contr.js"></script>
<style type="text/css">
	.charts{width: 1200px;height: 400px;margin-left: auto;margin-right: auto; margin-top: 30px}
	.date{ width: 1200px;margin:0 auto;}
	.suss{margin-top: 150px;float: right;margin-right: 100px }
			/*----------用来移除叉叉按钮----------*/
			input[type="date"]::-webkit-clear-button{
			   display:none;
			}

		::-webkit-datetime-edit { padding: 3px; background: url(/study/image/selection.gif); }
		::-webkit-datetime-edit-fields-wrapper { background-color: #eee; }
		::-webkit-datetime-edit-text { color: #4D90FE; padding: 0 .2em; }
		::-webkit-datetime-edit-year-field { color: purple; }
		::-webkit-datetime-edit-month-field { color: blue; }
		::-webkit-datetime-edit-day-field { color: green; }
		::-webkit-inner-spin-button { visibility: hidden; }
		::-webkit-calendar-picker-indicator {
	    border: 1px solid #ccc;
	    border-radius: 2px;
	    box-shadow: inset 0 1px #fff, 0 1px #eee;
	    background-color: #eee;
	    background-image: -webkit-linear-gradient(top, #f0f0f0, #e6e6e6);
	    color: #666;
	}
	
	.list1 ul{
            overflow: hidden;
            width: 200px;
            height: 20px;
            float: left;
            margin-top: 150px;
        }
        .list1 li{
            float: left;
            list-style-type: none;
        }
        .list1 a{
            display: block;
            padding: 0 16px;
            text-decoration: none;
            color: #999;
        }
        .list1 li+li a{
            border-left: 1px solid #aaa;
        }
        .list1 a:hover{
            color: #555;
        }
</style>
</head>
<body>
	
	 <div class="date">
		 <nav class="list1" id="nav">
        <ul>
            <li><a href="javascript:void(0)" id="thismouth">本月流量</a></li>
            <li><a href="?c=user&m=charts" id="thisday">今日流量</a></li>

        </ul>
        <ul id="total">本月总流量:<?php echo $total; ?></ul>
        
    </nav>
    
	 <div class="suss" style="display:none"> <span style="margin: 0 5px 0 0">开始时间:</span><input  type="date" name="start" id="indate"><span style="margin: 0 5px 0 5px" >结束时间:</span><input  type="date" name="end" id="endate"><input style="margin-left:5px" type="button" id="check" name="check" value="查询"></div>
	</div>
	<div id="container" class="charts">
	<div id="ydata" style="display:none">
	<?php echo $y ?>
	</div>
	<div id="xdata" style="display:none">
	<?php echo $x ?>
	</div>
	<div class="suss"> 
	
	

</body>
<script type="text/javascript">

 var ydata =JSON.parse($("#ydata").text());
 var xdata = JSON.parse($("#xdata").text());
	$(document).ready(function() {
	if (window.top==window.self){  
	   window.top.location="?c=admin&m=index"; 
	};
	   $('#container').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: '本月流量'
        },
        subtitle: {
            text: ''
        },
        xAxis: {
            categories: xdata ,
            crosshair: true
        },
        yAxis: [{
            min: 0,
            title: {
                text: '流量 (MB)'
            },
			labels: {     
			formatter: function(){
       		if(this.value>1024){
       			return  Math.round(this.value/1024)+"GB";
       		}else if(this.value>1024*1024){
       			return  Math.round(this.value/1024)+"TB";
       		}else{
       			return  this.value+"MB";
       		}      			
       		}
		}
			
        }],
        tooltip: {
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
            '<td style="padding:0"><b>{point.y:.1f} MB</b></td></tr>',
            footerFormat: '</table>',
            shared: false,
            useHTML: true
        },
        plotOptions: {
            column: {
                borderWidth: 0
            },
			series: {
            showInLegend: true,			
			events: {
				legendItemClick:function(event){ 
					return false
					}
				}			 		
            }
        },
		credits: {
			enabled: false
		},
		
        series: [{
            name: '流量',
            data: ydata,
        }]
		
    });
	
});
	
</script>
</html>